<template>
  <div class="mainBottomChild">
    <span class="topTitle">投递简历学校分布前十名</span>
    <div class="scrollContainer">
      <!--滚动项共10条-->
      <div class="scrollView">
        <scroll
          v-for="(item, index) in sortArr"
          :key="index"
          :index="index"
          :name="item.name"
          :num="item.num"
        ></scroll>
      </div>
    </div>
  </div>
</template>

<script>
import scroll from "./scroll.vue";
export default {
  name: "mainBottomChild",
  components: {
    scroll,
  },
  data() {
    return {
      arr: [
        { num: 20,name:'龙岩学院' },
        { num: 30 ,name:'武夷学院'},
        { num: 20 ,name:'福建师范大学'},
        { num: 50 ,name:'莆田学院'},
        { num: 10 ,name:'福州理工学院'},
        { num: 70 ,name:'福州外语外贸学院'},
        { num: 40 ,name:'福建工程学院'},
        { num: 32 ,name:'闽南理工学院'},
        { num: 60 ,name:'闽江学院'},
        { num:15,name:'宁德师范学院'}
      ],
      sortArr:[]
    };
  },
  mounted() {
    this.itemClick();
  },
  methods: {
    itemClick() {
      this.sortArr = this.arr.sort((a,b)=>{
        return b.num - a.num
      })
      let scrollContainer = document.getElementsByClassName("scrollContainer")[0];
      let scrollView = document.getElementsByClassName("scrollView")[0];
      //let scrollItem = document.getElementsByClassName('scrollItem')[0]

      let content = scrollView.innerHTML;
      scrollView.innerHTML = scrollView.innerHTML + content;
      setInterval(moveUp, 2000);
      //定义方法,功能是使div中的内容可以向上滚动
      function moveUp() {
        if (scrollContainer.scrollTop > 340) {
          scrollContainer.scrollTop = 0;
        } else {
          scrollContainer.scrollTop = scrollContainer.scrollTop + 58;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mainBottomChild {
  position: relative;
  margin-top: 20px;
  right: 0;
  height: 300px;
  background: url("../../../assets/数据屏/右2@2x.png") no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  .topTitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8px;
    font-weight: 700;
    color: #fefffb;
    font-size: 15px;
  }
  .scrollContainer {
    position: absolute;
    width: 90%;
    height: 76%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -38%);
    overflow: hidden; //超出部分隐藏
    .scrollView {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
